/**
 * Created by Dalyn on 2017/5/8.
 */
import React from "react";
import {hashHistory} from 'react-router';
import Relay from "react-relay";
import { Table, Button, Icon, Modal, message, Input } from 'antd';
import ReactKey from "../../../../../util/ReactKey";
import Util from "../../../../../util/Util";
import Pagination from "../Pagination"
import GetPlanDetailByOrderIdMutation from './mutation/GetPlanDetailByOrderIdMutation';
import "./css/fabricRaw.css";

export default class MaterialBill extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            pageSize: 100,
            pageNum: 1,
            totalResult: "",
            editable: true,
            value:'',
            proDigestModel:[],
            context:[{},{}],
            proMaterialIds: [],
            dataSource: [],
            materialIndex: 0,
            demandQuantityIndex: 0,
            loading: true,
            /*删除项*/
            visible:false,
            imgLook:"",
        };
        this.planIdsDel = [];
        this.enterpriseId = sessionStorage.getItem("enterpriseId");
        this.roleNumber = sessionStorage.getItem("roleNumber");
        this.operationId = sessionStorage.getItem("uid");
    }

    componentWillMount(){
        let {pageSize,pageNum} = this.state;
        this.getPlanDetailByOrderId(pageSize,pageNum)
        /*if(this.roleNumber == 10001){
            /!*业务员*!/
            this.proDigestList(this.operationId);
        }else {
            /!*其他所有员*!/
            this.proDigestList();
        }*/
    }
    /*拉取表格数据*/
    getPlanDetailByOrderId(pageSize,pageNum) {
        Relay.Store.commitUpdate(
            new GetPlanDetailByOrderIdMutation({
                pageSize:pageSize,
                pageNum: pageNum,
                orderId:this.props.orderId,
                // orderId:"TD20170526110000018525",
            }),
            {
                onFailure: () => {
                    message.error("网络请求失败")
                    this.setState({
                        loading: false
                    })
                },
                onSuccess: (response) => {
                    let errorCode = response.getPlanDetailByOrderId.responseData.errorCode;
                    if (errorCode == 0) {
                        let planDetailModelList = response.getPlanDetailByOrderId.responseData.planDetailModelList;
                        /*if (!planDetailModelList.length) {
                            planDetailModelList.push({
                                // addRow: 1,
                                pdId: this.state.pdId || null,
                                planId:null,
                                productName: null,
                                imgUrl: null,
                                specification: null,
                                colour: null,
                                prickle:  null,
                                needCount:  null,
                                thisTimeCount:  null,
                                totalCount:  null,
                                varianceCount:  null,
                                ratio:  null,
                                remark: null,
                            })
                        }*/
                        this.setState({
                            dataSource: planDetailModelList,
                            loading: false
                        })
                    } else{
                        this.setState({
                            loading: false
                        });
                        if(errorCode == 500){
                            message.error('服务器错误，请联系系统管理员')
                        }
                    }
                }

            }
        );
    }
    handleOk = (e) => {
        // console.log(e);
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        // console.log(e);
        this.setState({
            visible: false,
        });
    }
    imgLook(imgUrl) {
        if (imgUrl) {
            this.setState({
                visible: true,
                imgLook: imgUrl
            })
        }
    }
    /*页码*/
    onSure(size,num){
        this.setState({
            pageSize: size,
            pageNum: num,
            loading:true,
        }, this.myRelay)
    }
    render(){
        let { dataSource,proDigestModel} = this.state;
        const { value, editable } = this.state;
        const columns = [
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
                width: 80,
                render: ((text, record, index) =>{
                    return index+1
                })
            },
            {
                title:"款号",
                dataIndex: 'styleNo',
                key: 'styleNo',
                width: 200,
                render:(text, record, index) =>{
                    return <span className="" ref={"styleNo"}>{record.styleNo}</span>
                }
            },
            {
                title:"物料名称",
                dataIndex: 'productName',
                key: 'productName',
                width: 200,
                render:(text, record, index) =>{
                    // console.log(record.productName);
                    return <span className="" ref={"productName"}  title={record.productName}>{record.productName}</span>
                }
            },
            {
                title: '图片',
                dataIndex: 'imgUrl',
                key: 'imgUrl',
                width: 200,
                render: ((text, record, index) =>{
                    let imgUrl = record.imgUrl?JSON.parse(record.imgUrl):null;
                    return imgUrl && imgUrl.url?
                        (
                            <img width="94" onClick={this.imgLook.bind(this,imgUrl.url)} className="production_fabricRawLook_td_img_context" alt="" src={imgUrl.url}/>
                        ) :(
                        <span className="production_fabricRawLook_td_img_context" title="未上传图片"></span>
                    )
                })
            },
            {
                title: '规格',
                dataIndex: 'specification',
                key: 'specification',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"specification"}>{record.specification}</span>
                }
            },
            {
                title: '颜色',
                dataIndex: 'colour',
                key: 'colour',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"colour"}>{record.colour}</span>
                }

            },
            {
                title: '单位',
                key: 'prickle',
                dataIndex: 'prickle',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"prickle"}>{record.prickle}</span>
                }
            },
            /*{
                title:"需求数",
                dataIndex: 'needCount',
                key: 'needCount',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"needCount"}>{record.needCount}</span>
                }
            },*/
            /*{
                title: "本次到料数",
                dataIndex: 'thisTimeCount',
                key: 'thisTimeCount',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"totalCount"}>{Number(record.thisTimeCount)}</span>
                }
            },*/
           /* {
                title: '累计到料数',
                dataIndex: 'totalCount',
                key: 'totalCount',
                width: 200,
                render:(text, record, index) =>{
                    return <span className="" ref={"totalCount"}>{Number(record.totalCount)}</span>
                }
            },*/
            /*{
                title: '差异数',
                dataIndex: 'varianceCount',
                key: 'varianceCount',
                width: 100,
                render:(text, record, index) =>{

                    return <span className="" ref={"varianceCount"}>{-Number(record.varianceCount)}</span>
                },
            },*/
            {
                title: '到料比例(%)',
                key: 'ratio',
                dataIndex: 'ratio',
                width: 180,
                render:(text, record, index) =>{
                    return <span className="" ref={"ratio"}>{record.ratio}%</span>
                }
            },
            /*{
                title: '备注',
                dataIndex: 'remark',
                key: 'remark',
                width: 200,
                render:(text, record, index) =>{
                    return <span className="" ref={"ratio"}>{record.remark}</span>
                }
            },*/
        ];
        return (
            <div>
                <Table
                    columns={columns}
                    dataSource={dataSource}
                    // bordered
                    className="order_table"
                    pagination={false}
                    style={{width:'100%',marginTop:"0"}}
                    loading={this.state.loading}

                />
                <Modal title="查看图片" visible={this.state.visible}
                       onOk={this.handleOk} onCancel={this.handleCancel}
                       footer={null}
                       wrapClassName='order_fabricRaw_img_modal'
                       okText="OK" cancelText="Cancel"
                >
                    <img src={this.state.imgLook} alt="图片" />
                </Modal>
                {/*<Pagination eachSize={this.state.pageSize} dataSize={this.state.totalResult} onSure={this.onSure.bind(this)} ref={'pagination'}/>*/}
            </div>
        )
    }
}
